import 'package:flutter/material.dart';

class LearningModeWidget extends StatelessWidget {
  final Function(LearningMode) onModeSelected;

  const LearningModeWidget({
    Key? key,
    required this.onModeSelected,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.0),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '学习模式',
            style: TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 16.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _buildModeCard(
                context,
                LearningMode.speedReading,
                '速读模式',
                Icons.speed,
                Colors.blue,
                '快速浏览单词，提高记忆效率',
              ),
              _buildModeCard(
                context,
                LearningMode.review,
                '复习模式',
                Icons.replay,
                Colors.orange,
                '巩固已学单词，加深记忆',
              ),
              _buildModeCard(
                context,
                LearningMode.followReading,
                '跟读模式',
                Icons.record_voice_over,
                Colors.green,
                '跟随音频朗读，提高发音',
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildModeCard(
    BuildContext context,
    LearningMode mode,
    String title,
    IconData icon,
    Color color,
    String description,
  ) {
    return InkWell(
      onTap: () => onModeSelected(mode),
      borderRadius: BorderRadius.circular(12.0),
      child: Container(
        width: MediaQuery.of(context).size.width * 0.25,
        padding: const EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: color.withOpacity(0.1),
          borderRadius: BorderRadius.circular(12.0),
          border: Border.all(color: color.withOpacity(0.3)),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, color: color, size: 32),
            const SizedBox(height: 8.0),
            Text(
              title,
              style: TextStyle(
                fontSize: 14.0,
                fontWeight: FontWeight.bold,
                color: color,
              ),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 4.0),
            Text(
              description,
              style: TextStyle(
                fontSize: 10.0,
                color: Colors.grey[600],
              ),
              textAlign: TextAlign.center,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    );
  }
}

enum LearningMode {
  speedReading,
  review,
  followReading,
} 